<section class="content-header">
    <h1>
        刀具大数据查看
    </h1>
    <!-- <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
        </ol> -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-2 col-md-push-10">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-remove"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label for="DateTimeRange">起始刀具号</label>
                        <input type="text" [(ngModel)]='queryModel.startToolId' class="form-control pull-right" placeholder="请选择刀具" />
                        <!--id="DateTimeRange"-->

                    </div>
                    <div class="form-group">
                        <label for="DateTimeRange">结束刀具号</label>
                        <input type="text" [(ngModel)]='queryModel.endToolId' class="form-control pull-right" placeholder="请选择刀具" />
                    </div>
                    <div class="form-group">
                        <label>供应商订货号</label>
                        <input type="text" [(ngModel)]='queryModel.supplierOrderNumber' class="form-control pull-right" placeholder="供应商订货号" />
                        <!-- <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [searchEnabled]="true">
                        </dx-select-box> -->
                    </div>
                    <div class="form-group">
                        <label>加工特性</label>
                        <input type="text" [(ngModel)]='queryModel.processingProperties' class="form-control pull-right" placeholder="加工特性" />
                        <!-- <dx-drop-down-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" placeholder="请选择" [showClearButton]="true"
                            [dataSource]="equipemntItems">

                        </dx-drop-down-box> -->
                    </div>

                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-10 col-md-pull-2">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">数据展示</h3>
                    <div class="box-tools pull-right">
                        <!-- <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#excleImportModal" title="数据导入">
                            <i class="fa fa-file-excel-o"></i>
                        </button> -->
                        <!-- <button type="button" (click)="saveChanges()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存">
                            <i class="fa fa-save"></i>
                        </button> -->
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">

                    <dx-data-grid [dataSource]="items" on [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
                    [rowAlternationEnabled]="true" (onExporting)="onExporting($event)">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-export [enabled]="true" fileName="ToolReport" [allowExportSelectedData]="false"></dxo-export>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxi-column [allowEditing]="false" dataField="toolOrdinalNumber" caption="工序号" [width]="80">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="toolId" caption="刀具号" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="toolName" caption="ID号" [width]="100">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="supplier" caption="供应商" [width]="100">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="toolEncoding" caption="刀辅具名称" [width]="150">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="toolSpec" caption="刀具规格" [width]="250">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" caption="查看" [width]="200" [allowSorting]="false" cellTemplate="cellTemplate">
                        </dxi-column>
                        <div *dxTemplate="let data of 'cellTemplate'">
                            <button type="button" class="btn-group" (click)="openDialog(data.data)">
                                详情
                            </button>
                            <button type="button" class="btn-group" (click)="openDialogDrawing(data.data)">
                                D查看
                            </button>
                            <button type="button" class="btn-group" (click)="openDialogLayout(data.data)">
                                L查看
                            </button>
                        </div>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
    <!-- /.dialog -->
    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">详情查看</h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs pull-right">
                        <li class="active">
                            <a href="#attribute" data-toggle="tab">基本属性</a>
                        </li>
                        <li>
                            <a href="#parameter" data-toggle="tab">参数</a>
                        </li>
                        <li>
                            <a href="#cost" data-toggle="tab">成本</a>
                        </li>
                        <li>
                            <a href="#other" data-toggle="tab">其它</a>
                        </li>

                    </ul>
                    <div class="tab-content no-padding">
                        <div class="chart tab-pane active" id="attribute" style="position: relative; ">
                            <table class="table">
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolOrdinalNumber">工序号</label>
                                            <input [(ngModel)]="dialogGrid.toolOrdinalNumber" type="text" readonly="readonly" class="form-control" id="toolOrdinalNumber">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolId">刀具号</label>
                                            <input [(ngModel)]="dialogGrid.toolId" type="text" readonly="readonly" class="form-control" id="toolId">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="id">ID号</label>
                                            <input [(ngModel)]="dialogGrid.toolName" type="text" readonly="readonly" class="form-control" id="toolName">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="supplier">供应商</label>
                                            <input [(ngModel)]="dialogGrid.supplier" type="text" readonly="readonly" class="form-control" id="supplier">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolName">刀辅具名称</label>
                                            <input [(ngModel)]="dialogGrid.toolEncoding" type="text" readonly="readonly" class="form-control" id="toolEncoding">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="productModel">加工产品型号</label>
                                            <input [(ngModel)]="dialogGrid.productModel" type="text" readonly="readonly" class="form-control" id="productModel">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolSpec">刀具规格</label>
                                            <input [(ngModel)]="dialogGrid.toolSpec" type="text" readonly="readonly" class="form-control" id="toolSpec">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="supplierOrderNumber">供应商订货号</label>
                                            <input [(ngModel)]="dialogGrid.supplierOrderNumber" type="text" readonly="readonly" class="form-control" id="supplierOrderNumber">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="processingProperties">加工特性</label>
                                            <input [(ngModel)]="dialogGrid.processingProperties" type="text" readonly="readonly" class="form-control" id="processingProperties">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolMaterial">刀具材料</label>
                                            <input [(ngModel)]="dialogGrid.toolMaterial" type="text" readonly="readonly" class="form-control" id="toolMaterial">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolNumber">刀具数量</label>
                                            {{pvalue}}
                                            <input [(ngModel)]="dialogGrid.toolNumber" type="text" readonly="readonly"
                                                class="form-control" id="toolNumber">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="chart tab-pane " id="parameter" style="position: relative; ">
                            <table class="table">
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label>Vc(m/min)</label>
                                            <input [(ngModel)]="dialogGrid.vc" type="text" readonly="readonly" class="form-control">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="changePrice">Fn(mm/n)</label>
                                            <input [(ngModel)]="dialogGrid.changePrice" type="text" readonly="readonly" class="form-control" id="changePrice">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="dia">dia.mm</label>
                                            <input [(ngModel)]="dialogGrid.dia" type="text" readonly="readonly" class="form-control" id="dia">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="rpm">RPM (n/min)</label>
                                            <input [(ngModel)]="dialogGrid.rpm" type="text" readonly="readonly" class="form-control" id="rpm">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="feed">Feed(mm/min)</label>
                                            <input [(ngModel)]="dialogGrid.feed" type="text" readonly="readonly" class="form-control" id="feed">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="cycleAmount">CycleAmount</label>
                                            <input [(ngModel)]="dialogGrid.cycleAmount" type="text" readonly="readonly" class="form-control" id="cycleAmount">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="travel">Travel行程(mm)mm</label>
                                            <input [(ngModel)]="dialogGrid.travel" type="text" readonly="readonly" class="form-control" id="travel">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="cycleTime">cycletime</label>
                                            <input [(ngModel)]="dialogGrid.cycleTime" type="text" readonly="readonly" class="form-control" id="cycleTime">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="machineStep">machine step</label>
                                            <input [(ngModel)]="dialogGrid.machineStep" type="text" readonly="readonly" class="form-control" id="machineStep">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="usableBladeNumber">可使用刃口数</label>
                                            <input [(ngModel)]="dialogGrid.usableBladeNumber" type="text" readonly="readonly" class="form-control" id="usableBladeNumber">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="changePieceNumber">换片次数</label>
                                            <input [(ngModel)]="dialogGrid.changePieceNumber" type="text" readonly="readonly" class="form-control" id="changePieceNumber">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="repairableFrequencyNumber">可修磨次数</label>
                                            <input [(ngModel)]="dialogGrid.repairableFrequencyNumber" type="text" readonly="readonly" class="form-control" id="repairableFrequencyNumber">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div class="chart tab-pane" id="cost" style="position: relative; ">
                            <table class="table">
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="newToolPrices">新刀价格{{this.dialogGrid.ToolNumber}}</label>
                                            <input [(ngModel)]="dialogGrid.newToolPrices" type="text" readonly="readonly" class="form-control" id="newToolPrices">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="changePrice">换片价格</label>
                                            <input [(ngModel)]="dialogGrid.changePrice" type="text" readonly="readonly" class="form-control" id="changePrice">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="grindingPrice">修磨价格</label>
                                            <input [(ngModel)]="dialogGrid.grindingPrice" type="text" readonly="readonly" class="form-control" id="grindingPrice">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizationSupplier">新刀优化供应商</label>
                                            <input [(ngModel)]="dialogGrid.optimizationSupplier" type="text" readonly="readonly" class="form-control" id="optimizationSupplier">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizePrice">优化新刀价格</label>
                                            <input [(ngModel)]="dialogGrid.optimizePrice" type="text" readonly="readonly" class="form-control" id="optimizePrice">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="changeOrSharpenTheSupplier">换片或修磨优化供应商</label>
                                            <input [(ngModel)]="dialogGrid.changeOrSharpenTheSupplier" type="text" readonly="readonly" class="form-control" id="changeOrSharpenTheSupplier">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizeTheExchangePrice">优化换片价格</label>
                                            <input [(ngModel)]="dialogGrid.optimizeTheExchangePrice" type="text" readonly="readonly" class="form-control" id="optimizeTheExchangePrice">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizeTheGrindingPrice">优化修磨价格</label>
                                            <input [(ngModel)]="dialogGrid.optimizeTheGrindingPrice" type="text" readonly="readonly" class="form-control" id="optimizeTheGrindingPrice">
                                        </div>
                                    </td>
                                </tr>
                            </table>


                        </div>
                        <div class="chart tab-pane" id="other" style="position: relative; ">


                            <table class="table">
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="toolDurability">刀具耐用度</label>
                                            <input [(ngModel)]="dialogGrid.toolDurability" type="text" readonly="readonly" class="form-control" id="toolDurability">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizingToolLife">优化刀具寿命</label>
                                            <input [(ngModel)]="dialogGrid.optimizingToolLife" type="text" readonly="readonly" class="form-control" id="optimizingToolLife">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="cpu">CPU</label>
                                            <input [(ngModel)]="dialogGrid.cpu" type="text" readonly="readonly" class="form-control" id="cpu">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="optimizedCPU">优化后CPU</label>
                                            <input [(ngModel)]="dialogGrid.optimizedCPU" type="text" readonly="readonly" class="form-control" id="optimizedCPU">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="form-group">
                                            <label for="reduceTheCPU">CPU降低</label>
                                            <input [(ngModel)]="dialogGrid.reduceTheCPU" type="text" readonly="readonly" class="form-control" id="reduceTheCPU">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="reduceTheRateOfCPU">CPU降低率</label>
                                            <input [(ngModel)]="dialogGrid.reduceTheRateOfCPU" type="text" readonly="readonly" class="form-control" id="reduceTheRateOfCPU">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <label for="completionDate">试验完成日期</label>
                                            <input [(ngModel)]="dialogGrid.completionDate" type="text" readonly="readonly" class="form-control" id="completionDate">
                                        </div>
                                    </td>
                                </tr>
                            </table>


                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-primary" (click)="saveChanges()">保存</button> -->
                    <!-- <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button> -->
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

    <!--dialogDrawing -->


    <div class="modal fade" id="filterModalDrawing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">版本查看</h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs pull-right">
                        <!-- <li class="active">
                            <a href="#attribute" data-toggle="tab">版本</a>
                        </li> -->

                    </ul>
                    <div class="tab-content no-padding">
                        <div class="chart tab-pane active" id="attribute" style="position: relative; ">
                            <label>版本</label>
                            <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="drawingVersions" displayExpr="version"
                                [(selectedItem)]="drawingVersionSelected" [value]="drawingVersionSelected" [searchEnabled]="true">
                            </dx-select-box>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="viewDrawingPdf()" data-dismiss="modal">查看</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!--dialogLayout -->
    <div class="modal fade" id="filterModalLayout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">版本查看</h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs pull-right">
                        <!-- <li class="active">
                            <a href="#attribute" data-toggle="tab">版本</a>
                        </li> -->

                    </ul>
                    <div class="tab-content no-padding">
                        <div class="chart tab-pane active" id="attribute" style="position: relative; ">
                            <label>版本</label>
                            <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="layoutVersions" displayExpr="version"
                                [(selectedItem)]="layoutVersionSelected" [value]="layoutVersionSelected" [searchEnabled]="true">
                            </dx-select-box>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="viewLayoutPdf()" data-dismiss="modal">查看</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <div class="modal fade" id="excleImportModal" tabindex="-1" role="dialog" aria-labelledby="myLabel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLabel">刀具大数据导入</h4>
                </div>
                <div class="modal-body">
                    <div class="blue clearfix">
                        <input type="file" ng2FileSelect [uploader]="uploader" />
                        <a class="pull-right" (click)="downloadTemplate()">下载模板</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="importExcel()">导入</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</section>